<div class="container">
    <h1>GUIDELINE FOR METALAB</h1>
    <hr>
    <div class="container-fluid">
        <section class="panel-body">
            <h2>FONT</h2>
            <hr>
            <p>
                微软雅黑正文 #333333<br>
                默认字号14px，<br>
                行高20px<br>
            </p>
        </section>
        <section class="panel-body">
            <h2>HEADINGS</h2>
            <hr>
            <div>
                <h1>h1. 迈科技标题 40px</h1>
                <h2>h2. 迈科技标题 32px</h2>
                <h3>h3. 迈科技标题 24px</h3>
                <h4>h4. 迈科技标题 18px</h4>
                <h5>h5. 迈科技标题 14px</h5>
                <h6>h6. 迈科技标题 12px</h6>
                分割线 <code>&lt;hr&gt;</code>
                <hr>
            </div>
        </section>
        <section class="panel-body">
            <h2>SPECIAL BUTTONS</h2>
            <hr>
            <div>
                <p style="background: gray">
                    <button type="button" class="btn meta-banner-blue-only">HEADER BANNER BLUE ONLY(BACKGROUND
                        TRANSPARENT)
                    </button>
                    <code>btn meta-banner-blue-only</code><br><br>
                    <button type="button" class="btn meta-banner-white-only">HEADER BANNER WHITE ONLY(BACKGROUND
                        TRANSPARENT)
                    </button>
                    <code>btn meta-banner-white-only</code><br><br>
                    <button type="button" class="btn meta-banner-white">HEADER BANNER WHITE</button>
                    <code>btn meta-banner-white</code><br><br>
                    <button type="button" class="btn meta-banner-white-reverse">HEADER BANNER WHITE REVERSE</button>
                    <code>btn meta-banner-white-reverse</code><br><br>
                    <button type="button" class="btn meta-banner-golden-only">HEADER BANNER GOLDEN ONLY(BACKGROUND
                        TRANSPARENT)
                    </button>
                    <code>btn meta-banner-golden-only</code><br><br>
                    <button type="button" class="btn meta-banner-golden">HEADER BANNER GOLDEN</button>
                    <code>btn meta-banner-golden</code><br><br>
                    <button type="button" class="btn meta-banner-golden-reverse">HEADER BANNER GOLDEN REVERSE</button>
                    <code>btn meta-banner-golden-reverse</code><br><br>
                    <!--<button type="button" class="btn meta-banner-searchbar">HEADER BANNER SEARCHBAR</button>-->
                    <!--<code>btn meta-banner-searchbar</code><br><br>-->
                </p>
            </div>
        </section>
        <section class="panel-body">
            <h2>BUTTONS</h2>
            <hr>
            <div>
                <p>
                    <button type="button" class="btn btn-default">默认样式</button>
                    <code>btn-default</code><br><br>
                    <button type="button" class="btn btn-primary">首选项</button>
                    <code>btn-primary</code><br><br>
                    <button type="button" class="btn btn-default" disabled="disabled">Button</button>
                    <code>btn-default</code>、<code>disabled='disabled'</code><br><br>
                    <button type="button" class="btn btn-primary" disabled>Button</button>
                    <code>btn-primary</code>、<code>disabled</code><br><br>
                    <!-- Indicates a successful or positive action -->
                    <button type="button" class="btn btn-success">（成功）Success</button>
                    <code>btn-success</code><br><br>
                    <!-- Contextual button for informational alert messages -->
                    <button type="button" class="btn btn-info">（一般信息）Info</button>
                    <code>btn-info</code><br><br>
                    <!-- Indicates caution should be taken with this action -->
                    <button type="button" class="btn btn-warning">（警告）Warning</button>
                    <code>btn-warning</code><br><br>
                    <!-- Indicates a dangerous or potentially negative action -->
                    <button type="button" class="btn btn-danger">（危险）Danger</button>
                    <code>btn-danger</code><br><br>
                    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                    <button type="button" class="btn btn-link">（链接）Link</button>
                    <code>btn-link</code><br><br>
                    <button type="button" class="btn btn-link" disabled>（链接）Link</button>
                    <code>btn-link</code>、<code>disabled</code><br><br>
                    <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
                    <code>btn-lg</code><br><br>
                    <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
                    <br><br>
                    <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
                    <code>btn-sm</code><br><br>
                    <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
                    <code>btn-xs</code><br><br>
                </p>
            </div>
        </section>
        <section class="panel-body">
            <h2>FORM</h2>
            <hr>
            <div>
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <code class="col-sm-6 text-right">style="height: 36px;"</code>
                            <code class="col-sm-6">class="btn btn-default" style="height: 36px;"</code>
                        </div>
                        <div class="col-sm-6 text-right">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email"
                                   style="height: 36px;">
                        </div>
                        <div class="col-sm-6">
                            <button type="submit" class="btn btn-default" style="height: 36px;">Sign in</button>
                        </div>
                    </div>
                    <div class="form-group">
                            <textarea name="" id="" cols="30" rows="10" class="col-sm-6">
                                啊就开始打架黑胡椒哈我呵呵人阿吉翁会弹吉他微博软件挖掘hf士大夫似的撒D发生的地方Sdram发射点 ｓｄｆ说的的吊死扶伤sdfdsf啊就开始打架黑胡椒哈我呵呵人阿吉翁会弹吉他微博软件挖掘hf士
                                大夫似的撒D发生的地方Sdram发射点 ｓｄｆ说的的吊死扶伤sdfdsf啊就开始打架黑胡椒哈我呵呵人阿吉翁会弹吉他微博软件挖掘hf士大夫似的撒D发生的地方Sdram发射点 ｓｄｆ说的的吊死扶伤sdfdsf
                            </textarea>
                    </div>
                </form>
            </div>
        </section>
    </div>
</div>
